<template>
  <div>
    <XForm ref="form" :formData="info" :fieldList="fieldList" :options="formOption" :rules="rules" :disabled="disabled">
      <template #refund_status_desc>
        <span class="font-[600] text-[16px]">
          {{ info?.["refund_status_desc"] || "-" }}
        </span>
      </template>
      <template #warehouse>
        <WarehouseSelect v-model:modelValue="info.exchange_warehouse_id" @change="handleChangeWareHouse" />
      </template>
    </XForm>
  </div>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
import WarehouseSelect from "@/components/WarehouseSelect/index.vue"

import { getWarehouseList } from "@/api/public"

const props = defineProps({
  info: { type: Object, default: () => ({}) },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(["warehouse"])

// const model = ref({})

watch(
  () => props.info,
  (val) => {}
)

const handleChangeWareHouse = async (e) => {
  try {
    const res = await getWarehouseList({
      status: 1,
      warehouse_id: [e],
    })
    if (res?.data?.length) {
      const warehouseRes = res.data[0]
      // emit('warehouse', warehouseRes)
      console.log(props.info)
      const warehouseData = {
        exchange_warehouse_id: warehouseRes.id,
        exchange_warehouse_name: warehouseRes.warehouse_name,
        warehouse_country_code: warehouseRes.country,
        warehouse_country_name: warehouseRes.country_cn,
        warehouse_post_code: warehouseRes.zip_code,
        warehouse_contact_person: warehouseRes.contacts,
        warehouse_contact_phone: warehouseRes.phone,
        warehouse_address: warehouseRes.address,
      }
      emit("warehouse", warehouseData)
      return
    }
    emit("warehouse", "")
  } catch (e) {
    emit("warehouse", "")
    console.error(e)
  }
}

const publicStyle = { style: { width: "280px" } }
const form = ref()
const fieldList = ref([
  {
    type: "title",
    label: "退款信息",
  },
  {
    field: "exchange_type",
    label: "售后类型",
    type: "select",
    origin: "order_exchange_type",
    ...publicStyle,
  },
  {
    field: "customer_name",
    label: "客户姓名",
    ...publicStyle,
  },
  {
    field: "customer_phone",
    label: "客户电话",
    ...publicStyle,
  },
  {
    field: "customer_email",
    label: "客户邮箱",
    ...publicStyle,
  },
  {
    field: "exchange_warehouse_id",
    label: "退回仓库",
    slot: "warehouse",
    ...publicStyle,
  },
  {
    field: "exchange_tracking_number",
    label: "退回追踪号",
    ...publicStyle,
  },
])

const rules = reactive({
  exchange_type: [{ required: true, message: "请选择售后类型", trigger: "blur" }],
  exchange_warehouse_id: [{ required: true, message: "请选择退回仓库", trigger: "blur" }],
  
})

const formOption = ref({ inline: true, labelPosition: "top" })

defineExpose({ form })
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  margin-bottom: 4px !important;
}
</style>
